<template>
  <div id="PosDescribe">
    <Sidebar></Sidebar>
    <div class="job">
      <p
        class="p1"
        style="
          margin-left: 15%;
          margin-top: 100px;
          font-family: 宋体;
          font-size: 35px;
          color: white;
        "
      >
        <b>{{ positionelem.pname }}</b>
      </p>
      <p
        class="p1"
        style="
          margin-left: 15%;
          margin-top: 180px;
          font-family: 宋体;
          font-size: 25px;
          color: white;
        "
      >
        <b>{{ positionelem.cname }}</b>
      </p>
      <p
        class="p1"
        style="
          margin-left: 30%;
          margin-top: 105px;
          font-family: 宋体;
          font-size: 36px;
        "
      >
        <b style="color: orangered">{{ positionelem.salary }} </b
        ><b style="color: white"> 元/月</b>
      </p>
      <p
        class="p1"
        style="
          margin-left: 24%;
          margin-top: 180px;
          font-family: 宋体;
          font-size: 25px;
        "
      >
        <b style="color: rgb(255, 77, 77)">{{ positionelem.hot }} 热度</b>
      </p>
      <button class="applybutton" @click="apply()" v-if="!ifapply">
        申请岗位
      </button>
      <button class="applybutton" @click="deleteApply()" v-else>
        取消申请
      </button>
    </div>

    <!-- 职位描述 -->
    <div class="jobdescribe">
      <h2 style="margin-left: 3%">职位描述</h2>
      <pre><code v-text="jobInformation" style="font-size: x-large;"></code></pre>
    </div>
    <!-- 图片 -->
    <div class="safe"></div>
    <!-- 公司介绍 -->
    <div class="company">
      <h2 style="margin-left: 3%">公司介绍</h2>
      <pre><code v-text="companyInformation" style="font-size: x-large;"></code></pre>
    </div>
  </div>
</template>
  

  <script>
import axios from "axios";
import Sidebar from "@/components/SeekerSidebar.vue";
export default {
  components: {
    Sidebar,
  },
  data() {
    return {
      SeekerUserData: JSON.parse(sessionStorage.getItem("SeekerUser")),
      ifapply: false,
      jobInformation: "",
      companyInformation: "",
    };
  },
  created() {
    this.getifapply();
    this.Cinfo();
    this.Jinfo();
  },
  methods: {
    Cinfo() {
      // 使用 Axios 从后端获取文件内容
      let data = new FormData();
      if(this.positionelem.cinfo === undefined){
        data.append("cinfo", this.cinfo);
      }
      else{
        data.append("cinfo", this.positionelem.cinfo);
      }
      axios
        .post("http://localhost:8080/hqdx/company/showCompanyProfile", data)
        .then((response) => {
          this.companyInformation = response.data.data.items; // 更新Vue实例的数据
        })
        .catch((error) => {
          console.error("Error fetching file content:", error);
        });
    },
    Jinfo() {
      // 使用 Axios 从后端获取文件内容
      let data = new FormData();
      data.append("pinfo", this.positionelem.pinfo);
      axios
        .post(
          "http://localhost:8080/hqdx/company/showPositionDescription",
          data
        )
        .then((response) => {
          this.jobInformation = response.data.data.items; // 更新Vue实例的数据
        })
        .catch((error) => {
          console.error("Error fetching file content:", error);
        });
    },
    getifapply() {
      let data = new FormData();
      data.append("susername", this.SeekerUserData.susername);
      data.append("pid", this.positionelem.pid);
      axios
        .post("http://localhost:8080/hqdx/seeker/judgeApplyPosition", data)
        .then((response) => {
          this.ifapply = response.data.success;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    apply() {
      let data = new FormData();
      data.append("susername", this.SeekerUserData.susername);
      data.append("pid", this.positionelem.pid);
      axios
        .post("http://localhost:8080/hqdx/seeker/applyPosition", data)
        .then((response) => {
          //刷新按钮状态
          this.ifapply = !this.ifapply;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    deleteApply() {
      let data = new FormData();
      data.append("susername", this.SeekerUserData.susername);
      data.append("pid", this.positionelem.pid);
      axios
        .post("http://localhost:8080/hqdx/seeker/cancelApplyPosition", data)
        .then((response) => {
          //刷新按钮状态
          this.ifapply = !this.ifapply;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  computed: {
    positionelem() {
      return this.$route.params.ElemSeekerPos;
      //还有公司的信息
    },
    cinfo(){
      //公司页面路由跳转
      return this.$route.params.Cinfo;
    }
  },
};
</script>
  <style scoped >
.jobdescribe {
  margin-top: 1%;
  border-radius: 16px;
  width: 50%;
  height: 440px;
  border: none;
  background-color: white;
  margin-left: 23%;
}
.company {
  border-radius: 16px;
  margin-top: 1%;
  width: 50%;
  height: 400px;
  border: rgb(239, 230, 230) solid 1px;
  margin-left: 23%;
  background-color: white;
}
.safe {
  border-radius: 16px;
  width: 50%;
  margin-top: 1%;
  margin-left: 23%;
  height: 210px;
  border: none;
  background-image: url("/public/image/安全提示.png");
  background-size: 100% 100%;
}
.job {
  height: 280px;
  border: black solid 1px;
  background-color: #38556b;
}
.p1 {
  position: absolute;
  margin: 0;
}
.applybutton {
  border-radius: 16px;
  margin-left: 80%;
  margin-top: 200px;
  width: 100px;
  height: 50px;
  background-color: rgb(255, 255, 255);
  color: rgb(81, 212, 186);
  border: none;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.applybutton :hover {
  background-color: #00b4b3;
  /* 更改背景颜色 */
  color: white;
  /* 更改文字颜色 */
}
#PosDescribe {
  background: linear-gradient(to top, #ffffff, #e0f7fa);
}
/* 文本居中排列 */
.jobdescribe pre,
.company pre {
  text-align: left;
}

</style>
  